<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-03-26 10:57:00
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-02-05 17:50:52
 * @FilePath: /vue3-admin/src/views/system/MenusManage/MenusManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import CustomCard from '@/components/ui/CustomCard/CustomCard.vue';
import { useTable } from './useTable';
import EditView from './components/EditView/EditView.vue';

const {
    tree,
    loading,
    handleEdit,
    editShow,
    editId,
    addId,
    afterUpdate,
    handleDelete
} = useTable();
</script>

<template>
    <div class="page-container">
        <CustomCard title="" :canCollapse="false">
            <el-form class="mb" inline>
                <el-form-item>
                    <el-button type="success" @click.stop="() => handleEdit()"
                        >新增</el-button
                    >
                </el-form-item>
            </el-form>

            <el-table :data="tree" :loading="loading" row-key="id" border>
                <el-table-column label="菜单名称" prop="name" />
                <el-table-column label="菜单路径" prop="path" />
                <el-table-column label="排序" prop="sortWeight" />
                <el-table-column label="操作">
                    <template #default="scoped">
                        <div class="flex-row jc-center">
                            <el-button
                                type="success"
                                @click.stop="
                                    () => handleEdit(undefined, scoped.row.id)
                                "
                                >添加</el-button
                            >
                            <el-button
                                type="primary"
                                @click.stop="() => handleEdit(scoped.row.id)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                @click.stop="() => handleDelete(scoped.row.id)"
                                >删除</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <EditView
                v-model="editShow"
                :id="editId"
                :add-id="addId"
                @after-submit="afterUpdate"
            />
        </CustomCard>
    </div>
</template>
